<template>
	<div class="success">
		<img class="img" src="../public/微信支付.png" alt="">
		<div class="tip_one">
			订单支付成功
		</div>
		<div class="tip_two">
			<text class="one">支付方式</text>
			<text class="two">微信支付</text>
		</div>

		<div class="tip_three">
			<text class="one">支付金额</text>
			<text class="two">￥40.25</text>
		</div>

		<div class="tip_tip">
			<text class="one">支付时间</text>
			<text class="three">{{currentTime}}</text>
		</div>

		<div class="tip_four">
			<button @click="showorder">查看订单</button>
			<button @click="gotoindex">回到首页</button>
		</div>
	</div>
	<div class="tip_bot">
		<div class="bot_one">
			温馨提示：
		</div>
		<div class="bot_two">
			您的订单提交成功，请注意接听跑腿骑手来电
		</div>
	</div>

</template>

<script>
	import {
		ref,
		onMounted
	} from "vue"
	import router from '../router/index.js'
	export default {
		setup() {
			const currentTime = ref("");
			const date = new Date();
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			const hour = String(date.getHours()).padStart(2, '0');
			const minute = String(date.getMinutes()).padStart(2, '0');
			const second = String(date.getSeconds()).padStart(2, '0');
			const price = ref(0)
			onMounted(() => {
				currentTime.value = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
			});
			const showorder = () => {
				router.push("/");
			}
			const gotoindex = () => {
				router.push("/");
			}
			return {
				currentTime,
				price,
				showorder,
				gotoindex,
			};
		}
	}
</script>

<style>
	.success {
		margin: 0 auto;
		width: 100%;
		height: 100%;
		text-align: center;
	}

	.img {
		width: 150px;
		height: 150px;
		margin-top: 80px;
	}

	.tip_one {
		margin-top: 20px;
		font-size: 24px;
		color: #999;
	}

	.tip_two,
	.tip_three,
	.tip_tip {
		margin-top: 50px;
	}

	.one {
		font-size: 24px;
		color: #999;
		margin-right: 20px;
	}

	.two {
		font-size: 24px;
		color: red;
	}

	.three {
		font-size: 20px;
		color: #999;
	}

	.tip_four {
		margin-top: 50px;
		display: flex;
	}

	button {
		width: 130px;
		height: 50px;
		border: 1px solid #999;
		background-color: white;
		font-size: 20px;
		color: #999;
		border-radius: 5px;
		margin: 0 auto;
	}

	.tip_bot {
		margin-top: 80px;
	}

	.bot_one,
	.bot_two {
		margin-left: 30px;
		color: #999;
		font-size: 16px;
		margin-bottom: 25px;
	}
</style>